<template>
	<view>
		<view style="width: 750upx;height: 176upx;">
			<image src="../../static/shangmen/bj.png" style="width: 750upx;height: 176upx;position: absolute;"></image>
			<view style="display: flex;" @click="shangyibu">
				<view style="position: absolute;display: flex;margin-left: 20upx;line-height: 176upx;">
					<image src="../../static/shangmen/29.png" style="width: 38upx;height: 38upx;margin-top: 72upx;"></image>
				</view>
				<view style="width: 750upx;height: 176upx;text-align: center;font-size: 36upx;line-height: 176upx;position: absolute;z-index: 1;color: #fff;">汽车养护</view>
			</view>
		</view>
		<view class="list">
			<!-- <view class="zuo">
				<view class="zuo_box"></view>
			</view>
			<view class="you"></view> -->
			<view class="page-body" :style="'height:'+height+'px'">
				<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
					<!-- class="nav-left-item" -->
					<view  @click="categoryClickMain(index)" :key="index" :class="index==categoryActive?'actives nav-left-item':'activess nav-left-items'"
						v-for="(item,index) in classifyData">
						<text v-if="index==categoryActive" class="activesss"></text> {{item.name}}
					</view>
				</scroll-view>
				<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
					<view v-for="(foods,index) in classifyData" :key="index" class="box" style="min-height: 100vh;">
						<!-- <view style="padding: 20upx 10upx;width: 100%;font-size: 30upx;text-align: center;color: #333333;">{{foods.name}}</view> -->
						<view style="padding: 10upx;width: 100%;font-size: 28upx;text-align: center;line-height: 100upx;color: #999;" v-if="foods.list.length == 0">暂无数据</view>
						<view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in foods.list" :key="i" @click="cart(item.goods_id,item)">
							<view>  </view>
							<image :src="item.image" />
							<view>
								<view style="color: #333333;font-size: 32upx; margin-left: 20upx;">{{item.name}}</view>
								<view style="color: #FF4B33;font-size: 28upx; margin-left: 20upx;margin-top: 40upx;">￥ <text style="font-size: 36upx;">{{item.price}}</text> </view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import classifyData from '../../common/classify.data.js';
	export default {
		data() {
			return {
				name: "wkiwi",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				// classifyData:classifyData,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				datas:[],
				classifyData:[],
				value_data:'',
				car_name:''
			}
		},
		onLoad() {
			this.height = (uni.getSystemInfoSync().windowHeight - this.tabBarHeight) - 100
		},
		onShow() {
			this.index_notice_api()
			this.car_list_api()
		},
		methods: {
			index_notice_api() {
				var that = this
				that.$request(that.$Api.index_notice_api, {
					access_token: uni.getStorageSync('access_token'),
					city:that.city,
				}, "POST").then(res => {
					if (res.data.code == 0) {
						that.car_name = res.data.data.car_name
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			shangyibu() {
				uni.navigateBack()
			},
			confirm_tap() {
						if( this.value_data != '' ) {
							this.car_list_api()
							// uni.navigateTo({
							// 	url:'../../home/commodity_list/commodity_list?keyword='+this.value_data
							// })
						}
					},
					input_tap(num) {
						this.value_data = num.detail.value
					},
					//分类列表
					car_list_api(id) {
						var that = this
						that.$request(that.$Api.car_list_api, {
							access_token:uni.getStorageSync('access_token'),
							city:uni.getStorageSync('city'),
						},"POST").then(res => {
							console.log('res.data.data',res.data.data)
							if(res.data.data.length == 0) {
								return
							}
							that.classifyData = res.data.data
							console.log('that.classifyData',that.classifyData)
							that.$nextTick(()=>{
								that.getHeightList();
							})
						})
					},
					getHeightList(){
						let _this = this;
						let selectorQuery=uni.createSelectorQuery();
						selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
							console.log('rects',rects)
							_this.leftItemHeight  =  rects[0].height;
							_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
							_this.diff =  _this.navLeftHeight - _this.height;
						});
						selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
							let arr = [0];
							let top = 0;
							rects.forEach(function(rect){
			// 					rect.id      // 节点的ID
			// 					rect.dataset // 节点的dataset
			// 					rect.left    // 节点的左边界坐标
			// 					rect.right   // 节点的右边界坐标
			// 					rect.top     // 节点的上边界坐标
			// 					rect.bottom  // 节点的下边界坐标
			// 					rect.width   // 节点的宽度
			// 					rect.height  // 节点的高度
								top += rect.height;
								arr.push(top)
								})
								_this.arr = arr
							}).exec()
					},
					scroll(e) {
						let _this = this
						if(this.timeoutId){
							clearTimeout(this.timeoutId);
						}
						this.timeoutId = setTimeout(function(){ //节流
							// _this.scrollHeight = e.detail.scrollTop + 1 + _this.height/2;
							_this.scrollHeight = e.detail.scrollTop + 1;
							//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
							//若想使切换参考线为屏幕顶部请删除 _this.height/2
							for (let i = 0; i < _this.arr.length;i++) {
								let height1 = _this.arr[i];
								let height2 = _this.arr[i+1];
								if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
									_this.categoryActive = i;
									(_this.diff>0) && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff)/(classifyData.length-1)));
									return false;
								}
							}
							_this.categoryActive = 0;
							_this.timeoutId = undefined;
						}, 10)
					},
					categoryClickMain(index) {
						this.categoryActive = index;
						this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[index]//防止两次相等造成点击不触发滚动时间
					},
					cart (goods_id,item) {
						if( this.car_name == '' ) {
							var that = this
							uni.showModal({
								title: '提示',
								content: '请先添加车型',
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
										uni.navigateTo({
											url:'../brand/brand'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
							return
						}
						var data = {
							goods_id:goods_id,
							image:item.image,
							name:item.name,
							price:item.price,
						}
						// uni.navigateTo({
						// 	url:'../order_zf_a/order_zf_a?data_list='+JSON.stringify(data)
						// })
						uni.navigateTo({
							url:'../shop_details/shop_details?goods_id='+goods_id
						})
						// uni.showToast({
						// 	title: text,
						// 	icon: "none",
						// })
					}
		}
	}
</script>

<style>
	.top_input{
			font-size: 28upx;
			color: #B9B9B9;
			margin-left: 24upx;
			height: 60upx;
			line-height: 60upx;
		}
		.top_image{
			width: 33upx;
			height: 33upx;
			margin-top: 14upx;
			margin-left: 20upx;
		}
		.top{
			width: 683upx;
			margin-left: 34upx;
			height: 60upx;
			background: #fff;
			/* background: #cf4052; */
			border-radius: 31upx;
			display: flex;
			/* padding-top: 200upx; */
		}
		.page-body {
			display: flex;
			background: #F4F4F4;
			overflow: hidden;
			margin-top: 20upx;
		}
	
		.nav {
			display: flex;
			width: 100%;
		}
	
		.nav-left {
			width: 25%;
			background: #fafafa;
		}
	
		.nav-left-item {
			margin-left: 0upx;
			height: 45upx;
			/* border-right: solid 1px #f1f1f1; */
			/* border-bottom: solid 1px #f1f1f1; */
			font-size: 30upx;
			padding: 30upx 0;
			display: flex;
			align-items: center;
			/* justify-content: center; */
		}
		.nav-left-items {
			margin-left: 0upx;
			height: 45upx;
			/* border-right: solid 1px #f1f1f1; */
			/* border-bottom: solid 1px #f1f1f1; */
			font-size: 30upx;
			padding: 30upx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.nav-left-item:last-child{
			border-bottom: none;
		}
		.nav-right {
			width: 75%;
			background: #fff;
		}
		.box {
			display: block;
			overflow: hidden;
			border-bottom: 20upx solid #f3f3f3;
			/* min-height: 100vh; */ 
			/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
		}
		.box:last-child {
			border: none;
			min-height:100vh;
		}
		.nav-right-item {
			width: 500upx;
			height: 220upx;
			float: left;
			/* text-align: center; */
			padding: 11upx;
			display: flex;
			font-size: 28upx;
			background: #fff;
		}
	
		.nav-right-item image {
			width: 158upx;
			height: 158upx;
			margin-left: 20upx;
			border-radius: 10upx;
		}
		.actives{
			/* display: inline-block; */
			height: 10upx;
			color: #333;
			padding: 50upx 0;
			font-weight: bold;
			background: #fff;
			/* text-align: center; */
			/* border-left: 8upx solid #1C336B; */
		}
		.activesss{
			width: 6upx;
			height: 33upx;
			/* background: #1C336B; */
			color: #333;
			margin-right: 40upx;
			/* left: 0upx; */
			margin-top: 0upx;
			font-size: 28upx;
		}
		.activess{
			padding: 40upx 0;
			/* display: inline-block; */
			height: 10upx;
			background: #F4F4F4;
			color: #333;
			/* background: #fff; */
			/* border-left: 8upx solid rgba(red, green, blue, 0); */
		}
		.active {
			color: #333;
			background: #fff;
			border-right: 0;
			border-left: 8upx solid #cf4052;
		}
		::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
	   width: 0;
	   height: 0;
	   color: transparent;
	}
</style>
